/**
 * Created by wuhaiyang on 2017/4/16.
 */


import React, {Component} from 'react'

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    WebView
} from 'react-native'

import NavigationToolbar1 from '../widget/NavigationToolbar1'

export default class DetailArticlePage extends Component {
    constructor(props) {
        super(props)
    }

    renderLeftView() {
        return <TouchableOpacity
            onPress={()=>{
                if (this.canGoBack) {
                    this.webView.goBack()
                } else {
                    this.props.navigator.pop()
                }
            }}
            style={{paddingLeft:5,paddingRight:5}}
        >
            <Image source={require('../../res/img/ic_arrow_back_white_36pt.png')} style={{width:22,height:22}}/>
        </TouchableOpacity>
    }

    renderRightView() {
        return <TouchableOpacity>
            <Image
                source={require('../../res/img/ic_more_vert_white_48pt.png')}
                style={{width:22,height:22,marginRight:5}}
            />
        </TouchableOpacity>
    }

    onNavigationStateChange(nav) {
        this.canGoBack = nav.canGoBack
    }

    render() {
        return (
            <View style={styles.container}>

                <NavigationToolbar1
                    title={'详情'}
                    leftView={this.renderLeftView()}
                    rightView={this.renderRightView()}
                    statusBar={{
                        barStyle: 'light-content',
                        backgroundColor:'#2196f3'
                    }}
                />

                <WebView
                    ref={webView=>this.webView = webView}
                    source={{uri:this.props.url}}
                    startInLoadingState={true}
                    onNavigationStateChange={(nav)=>this.onNavigationStateChange(nav)}
                />
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
})
